<template>
  <div class="mod-config">
    <el-form :model="dataForm"  :rules="dataRule" ref="dataForm"  label-width="110px">

      <el-row>
        <el-col :span="12">

      <el-form-item label="接入机构" prop="bankid"   :class="{ 'is-required': dataForm.queryway=='1'}"  class="label_font">
          <el-select
            v-model="dataForm.bankid"
            clearable
            
            filterable
            style="width:100%"
            remote
        
            placeholder="接入机构"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
              v-for="item in list"
              :key="item.bankid"
              :label="item.bankname"
              :value="item.bankid">
            </el-option>
          </el-select>
      </el-form-item>

        </el-col>
        <el-col :span="12">

      <el-form-item label="查询方式" prop="queryway" class="label_font">
        <el-radio-group v-model="dataForm.queryway"  style="width:100%">
            <el-radio label="a0">按接入机构统计</el-radio>
            <el-radio label="a1" >按机构网点统计</el-radio>
        </el-radio-group>
      </el-form-item>

        </el-col>
      </el-row>


    <el-row>
      <el-col :span="12">
          <el-form-item label="地市" prop="seRegion"  class="label_font">
            <el-select  @change="selectChanged" v-model="dataForm.seRegion" placeholder="区域" style="width:100%" clearable >
                <el-option
                  v-for="item in dataForm.seRegionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
            </el-select>
          </el-form-item>
      </el-col>
      <el-col :span="12">
            <el-form-item label="区县" prop="region" class="label_font">
            <el-select v-model="dataForm.region" placeholder="区县"  style="width:100%" clearable>
                <el-option
                  v-for="item in dataForm.regionList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code">
                </el-option>
            </el-select>
          </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">

      <el-form-item class="label_font" label="起始时间" prop="begindate">
        <el-date-picker clearable
          v-model="dataForm.begindate"
          type="date"
          placeholder="选择起始时间"
          align="datetime"
          style="width:100%;"
           default-time="00:00:00"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item> 

      </el-col>
      <el-col :span="12">

      <el-form-item class="label_font" label="结束时间" prop="enddate">
        <el-date-picker clearable
          v-model="dataForm.enddate"
          type="datetime"
          placeholder="选择结束时间"
          style="width:100%;"
          default-time="23:59:59"
          align="right"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>

      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="登记中心" prop="bdcno"  class="label_font">
          <el-select
            v-model="dataForm.bdcno"
            clearable
     
            style="width:100%;"
        
            placeholder="登记中心"
         >
            <el-option
              v-for="item in list2"
              :key="item.bankid"
              :label="item.bankname"
              :value="item.bankid">
            </el-option>
          </el-select>
      </el-form-item>
      </el-col>

    </el-row>


      <el-row>
        <el-col :span="24" align="center">
          <el-button type="primary" @click="showReport()" >生成报表</el-button>
        </el-col>
      </el-row>

    </el-form>
    

    <!-- 弹窗, 新增 / 修改 -->
    <bdc-report v-if="bdcReportVisible" ref="bdcReport" ></bdc-report>
  </div>
</template>

<script>
  import BdcReport from './bdc-report'
  export default {
    data () {

      var validateBankid = (rule, value, callback) => {
        if (this.dataForm.queryway == 'a1' && !/\S/.test(value)) {
          callback(new Error('接入机构不能为空'))
        } else {
          callback()
        }
      }

      return {
        pickerOptions: this.datepicker.pickerOptions,
        dataForm: {
          bankid: '',
          queryway: 'a0',
          seRegion: '',
          region: '',
          bdcno: '',
          begindate: '',
          enddate: '',
           seRegionList: [],
           regionList: []
        },
       dataRule: {
          bankid: [
             { validator: validateBankid, trigger: 'blur' }
          ]
        },
        list: [],
        list2: [],

        bdcReportVisible: false,
        loading: false
      }
    },
    components: {
      BdcReport
    },
    activated () {
      this.init()
    },
    methods: {
      init(){
        this.$http({
            url: this.$http.adornUrl(`/sys/bdcbankinfo/djzx/list`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
                this.list2 = data.list;
            }
          }) 

          this.$http({
            url: this.$http.adornUrl(`/sys/bdcregion/se/list`),
                method: 'get',
                params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                  this.dataForm.seRegionList = data.list
  
              }
          })
      },



      selectChanged(value){
          this.dataForm.region = '';
          this.$http({
          url: this.$http.adornUrl(`/sys/bdcregion/listByLevle`),
              method: 'get',
              params: this.$http.adornParams({'upregion':value})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.regionList = data.list
            }
        })
      },

      showReport(){

          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              this.bdcReportVisible = true
              this.$nextTick(() => {
                this.$refs.bdcReport.init(this.dataForm.bankid, this.dataForm.queryway, this.dataForm.seRegion, 
                this.dataForm.region, this.dataForm.bdcno, this.dataForm.begindate, this.dataForm.enddate)
              })
            }           
          })
        
      },

      remoteMethod(query) {
        if (query !== '') {
          this.loading = true;

          this.$http({
            url: this.$http.adornUrl(`/sys/user/bank/search`),
            method: 'get',
            params: this.$http.adornParams({
              "key": query
            })
          }).then(({data}) => {
            this.loading = false;
            if (data && data.code === 0) {
                this.list = data.list;
            }
          })     
          
        } else {
          this.list = [];
        }
      }







    }
  }
</script>
<style lang="scss">
body .el-table th.gutter{
    display: table-cell!important;

}

</style>